<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的账户</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/feedback.css" />

		<!--图标-->
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<!--App自定义的css-->
		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
		<style>
			html {
				font-size: 100%;
				#background-color: #fff;
			}
			
			h5 {
				margin: 5px 7px;
			}
			
			.mui-card .mui-control-content {
				padding: 10px;
			}
			/*.mui-control-content {
				height: 550px;
			}*/
			
			.mui-btn {
				padding: 10px;
			}
			
			#kefu {
				font-size: 0.5rem;
				line-height: 30px;
			}
			
			header button img {
				width: 0.3rem;
			}
			
			.mui-bar {
				box-shadow: 0 0 1px rgba(255, 255, 255, 1);
			}
			/*.mui-content {
				background-color: #fff;
			}*/
			
			.mui-segmented-control {
				border-bottom: 3px solid #eeeeee!important;
			}
			
			.mui-content .mui-segmented-control {
				border: none;
			}
			
			.right {
				float: right;
			}
			
			.mui-control-content {
				min-height: 540px;
			}
			
			.liangzi {
				text-align: center;
				border: 1px solid #d7d7d7;
				height: 1rem;
			}
			
			.liangzi p {
				text-align: center;
				margin-top: 8%;
				color: #333333;
			}
			
			.liangzi a img {
				width: 80%;
				margin: 10px 0px;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 10px !important;
			}
			
			.peixun_one {
				height: 0.7rem;
				width: 1.4rem;
				line-height: 0.7rem;
				background-color: #fba94f;
				color: #fff;
				text-align: center;
				border-radius: 5px 5px;
				margin-left: 10px;
				margin-top: 10% !important;
			}
			
			.mui-btn-primary {
				border: 1px solid #33C3CB;
				background: #3ccad0;
				border-radius: 10px;
				width: 100%;
				height: 0.9rem;
				font-size: 15px;
			}
			
			.top_img {
				height: 1.7rem;
				background-color: #fff;
				overflow: hidden;
			}
			
			.top_img_one {
				display: inline-block;
				width: 1.0rem;
				margin-top: 5%;
				margin-left: 4%;
				float: left;
			}
			
			.top_img_one img {
				width: 1.0rem;
			}
			
			.top_img_two {
				display: inline-block;
				width: 4.0rem;
				height: 1.0rem;
				line-height: 1.0rem;
				float: left;
				margin-top: 6%;
				margin-left: 4%;
			}
			
			.account_detail_two {
				height: 1rem;
				border: 1px solid #d7d7d7;
				color: #333;
				background-color: #fff;
				margin-top: 5px;
				margin-bottom: 5px;
				padding-top: 0.3rem;
				padding-left: 0.2rem;
			}
			
			.account_detail_three {
				height: 1rem;
				border: 1px solid #d7d7d7;
				background-color: #ccf0f2;
				padding-top: 0.3rem;
				padding-left: 0.2rem;
			}
			
			.liangzii {
				text-align: center;
				border-bottom: 1px solid #d7d7d7;
				height: 1rem;
			}
			
			.liangzii p {
				text-align: center;
				margin-top: 10%;
				color: #333333;
				font-size: 0.28rem;
			}
			
			.mui-content-padded p {
				color: #333;
				font-size: 0.28rem;
			}
			
			.mui-navigate-right {
				top: 20px;
			}
			
			.mui-col-sm-12 {
				border-bottom: 3px solid #eeeeee;
			}
			
			.amend_one {
				margin-left: 20%;
				padding: 2px 10px;
			}
			
			.cus-content-padded {
				padding: 5px 15px;
				margin-bottom: 3px;
				background-color: #fff;
			}
			
			.shenqingtixian {
				left: 70%;
				top: 15%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="ptitle">我的账户</h1>
			<button type="button" id="shenqingtixian" class="shenqingtixian">申请提现</button>
		</header>

		<div class="mui-content" id="content">
			<div class="top_img" id="data_two">
				<div class="top_img_one"><img src="../images/mine/ye.png" alt="" /></div>
				<div class="top_img_two"> <strong>可用余额</strong> <span style="color:#fbc13e;" id="data_one" class="data_one">￥<span id="lovevalue">0</span> </span>
				</div>
			</div>

			<div class="mui-row" id="orderBtn" style="background-color: #FFF;">

				<div class="mui-col-sm-6 mui-col-xs-6 liangzi">
					<p>本月收入: <span id="month_value">0</span>元</p>
				</div>
				<div class="mui-col-sm-6 mui-col-xs-6 liangzi">
					<p>累计收入: <span id="accumulated_value">0</span>元</p>
				</div>

			</div>

			<div class="mui-table-view account_detail_two first_one" id="bank_ka">
				<div class="mui-navigate-right">
					<strong>银行卡</strong>
				</div>
			</div>
			<div class="account_detail_two first_two">
				<div style="position: relative;">
					<strong style="width: 65%;"><span id="cardBankName"></span>  **** **** **** <span id="cardNo"></span></strong> <button type="button" id="amend_one" class="amend_one" style="position: absolute;top: 1px;left: 63%;">修改</button>
				</div>
			</div>

			<div class="account_detail_three"><strong>账户明细</strong></div>
			<!--<div class="mui-row" id="orderBtn" style="background-color: #FFF;">

				<div class="mui-col-sm-4 mui-col-xs-4 liangzii">
					<p>收入</p>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4 liangzii">
					<p>提现</p>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4 liangzii">
					<p>扣款</p>
				</div>
			</div>-->
			<div class="mui-row" style="background-color: #eeeeee;" id="accountDtl">
				<!--<div class="mui-col-sm-12 mui-col-xs-12" id="contentBtn">
				</div>
				<div class="mui-col-sm-12 mui-col-xs-12" id="contentCfr" style="display:none">
					<div class="mui-content-padded"><button class="mui-btn mui-btn-block mui-btn-primary"><span>确认订单已完成</span></button></div>
				</div>-->
				<!--<div class="mui-col-sm-12 mui-col-xs-12">
					<div class="mui-content-padded">
						<p>新生儿家居护理及指导</p>
						<p>服务费：<span>334元/次</span> <span class="right" style="color:#ff3300;font-size:0.35rem">+235元</span></p>
						<p style="color:#8e8f90">2017/07/24 08：18：09</p>
					</div>
				</div>

				<div class="mui-col-sm-12 mui-col-xs-12">
					<div class="mui-content-padded">

						<p>提现： <span class="right" style="color:#ff3300;font-size:0.35rem">-200元</span></p>
						<p style="color:#8e8f90">2017/07/24 08：18：09</p>
					</div>
				</div>-->

				<div class="mui-col-sm-12 mui-col-xs-12">
					<!--<div class="cus-content-padded">
						<p><span id="cut_money">扣款：</span> <span id="money_value" class="right" style="color:#ff3300;font-size:0.35rem">-0</span>元</p>
						<p id="date_value" style="color:#8e8f90">0</p>
					</div>-->
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="../js/constants.js"></script>
	<script type="text/javascript" src="../js/sharemethods.js"></script>
	<script type="text/javascript" src="../js/xiangyingshi.js"></script>
	<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
	<script>
		mui.init({
			keyEventBind: {
				backbutton: true //打开back按键监听
			},
			beforeback: function() {
				//返回true，继续页面关闭逻辑  
				mui.back;
				return true;
			}
		});
		var txa = 0;
		var bankName = '';
		var bankNo = '';

		function initAccountInfo() {
			var sussess = function(data) {
				//服务器返回响应，根据响应结果，分析是否登录成功；
				if(data.result == "success") {
					//var all = (data.sub.all/100).fixed(2)
					txa = Math.floor(data.sub.ava) / 100;
					if(txa < 0) txa = 0;
					$("#lovevalue").html(txa);
					$("#month_value").html(Math.floor(data.sub.not) / 100);
					$("#accumulated_value").html(Math.floor(data.sub.all) / 100);
					//console.log(data.obj.cardNo)
					if(!data.obj.cardNo || data.obj.cardNo == '') { //卡号存在
						$(".first_one").show();
						$(".first_two").hide();
					} else {
						bankNo = data.obj.cardNo;
						bankName = data.obj.cardBankName;
						$('#cardBankName').html(data.obj.cardBankName)
						var str = data.obj.cardNo;
						$('#cardNo').html(str.substr(str.length - 4))
						$(".first_two").show();
						$(".first_one").hide();
					}
					initAccountDtl();
				} else {
					mui.toast(data.msg);
				}
			};
			commonHttpUtils(getdoctoraccountUrl, "get", {}, sussess, error);
		}

		function initAccountDtl() {
			var sussessd = function(data) {
				//服务器返回响应，根据响应结果，分析是否登录成功；
				if(data.result == "success") {
					data.obj.forEach(function(val) {
						var amount = Math.floor(val.amount) / 100
						var subjectDirection = "+";
						if(val.subjectDirection == "D") {
							subjectDirection = "-";
						}
						var year = val.amountDate.substring(0, 10);
						year = year.replaceAll("-", "/")
						var startDay = val.amountDate.substring(11, 19);

						$('#accountDtl').append('<div class="cus-content-padded"><p><span id="cut_money">' + val.desc + '</span> <span id="money_value" class="right" style="color:#ff3300;font-size:0.28rem">' + subjectDirection + ' ' + amount + '元</span></p><p id="date_value" style="color:#8e8f90">' + year + ' ' + startDay + '</p></div>')
					})
				} else {
					mui.toast(data.msg);
				}
			};
			commonHttpUtils(getdoctoraccountdetailUrl, "get", {}, sussessd, error);
		}

		mui.plusReady(function() {
			setPagePos();
			var currentView = plus.webview.currentWebview();
			currentView.show('slide-in-right', 200);
			plus.nativeUI.closeWaiting();

			initAccountInfo();

		});

		document.getElementById("bank_ka").addEventListener("tap", function() {
			mui.openWindow({
				url: 'account_bank_card.html',
				id: 'account_bank_card.html',
				show: {
					autoShow: false, //页面loaded事件发生后自动显示，默认为true
					event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
				},
				waiting: {
					autoShow: true //自动显示等待框，默认为true
				}

			});
		});

		document.getElementById("shenqingtixian").addEventListener("tap", function() {
			mui.openWindow({
				url: 'cash_withdraw.html',
				id: 'cash_withdraw.html',
				show: {
					autoShow: false, //页面loaded事件发生后自动显示，默认为true
					event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
				},
				extras: {
					bankName: bankName,
					bankNo: bankNo,
					txa: txa
				},
				waiting: {
					autoShow: true //自动显示等待框，默认为true
				}

			});
		});
		document.getElementById("amend_one").addEventListener("tap", function() {
			mui.openWindow({
				url: 'account_bank_card.html',
				id: 'account_bank_card.html',
				show: {
					autoShow: false, //页面loaded事件发生后自动显示，默认为true
					event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
				},
				waiting: {
					autoShow: true //自动显示等待框，默认为true
				}

			});
		});
	</script>

</html>